
import React, { useState, useEffect } from "react";
import "./index.less";
import Checkbox from "../checkbox/index";

interface Iprops {
    option: Array<Titem>;
    value: Array<boolean>;
    change: Function;
}
type Titem = {
    label: string;
    value: boolean;
};
const GroupCheck = (props: Iprops) => {
    const { option, value, change } = props;
    const [list, setList] = useState(option);
    function setChecked(index) {
        let arr = value;
        arr[index] = !value[index];
        change(arr);
    }
    function renderItem() {
        return list.map((item, index) => {
            return (
                <Checkbox
                    classN={index == list.length - 1 ? "ui-checkbox-end" : ""}
                    key={index}
                    label={item.label}
                    change={setChecked.bind(this, index)}
                    checked={value[index] ? value[index] : false}
                />
            );
        });
    }
    return <div className="ui-group-bg">{renderItem()}</div>;
};
export default GroupCheck;
